<template>
 <div class="ChidProperties">
   <div class="ChidProperties-Content-Box">
     <div class="ChidProperties-Title">
       <span>子元素属性:order数越小越靠前</span>
       <select @change="getIndex" >
          <option v-for="(itme,index) in value" :key="index" :value="itme.value" :id="index"  >{{itme.value+"/"+itme.Title}}</option>
     </select>
     </div>
     <div class="ChidProperties-Content">
       <div v-for="(item, index) in values" :key="index" :style="item.value" class="ChidProperties-Content-Chid">{{item.Title}}</div>
       
     </div>
   </div>
   <div class="flex-grow-Box">
     <div class="flex-grow-Title">flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</div>
     <div class="flex-grow-Content">
       <div class="flex-grow-Content-Chid" v-for="(itme,index) in number" :key="index" :style="itme.number">{{itme.value}}</div>
     </div>
   </div>
   <div class="flex-basis-Box">
     <div class="flex-basis-Chid" style="flex-basis:auto"></div>
     <div class="flex-basis-Chid"></div>
     <div class="flex-basis-Chid"></div>
     <div class="flex-basis-Chid"></div>
   </div>
 </div>
</template>
<script>
         
export default {
  data(){ 

   return {

  value:[//
   {value:"order:1;",Title:1},
   {value:"order:2;",Title:2},
   {value:"order:3;",Title:3},//
   {value:"order:4;",Title:4},
    {value:"order:5;",Title:5}//
 ],
   values:[//
   {value:"order:5;",Title:5},
   {value:"order:4;",Title:4},
   {value:"order:3;",Title:3},//
   {value:"order:2;",Title:2},
    {value:"order:1;",Title:1}//
 ],
 number:[//数值越大比例越大
   {number:"flex-grow:1;background-color:red;",value:"1"},
   {number:"flex-grow:2;background-color:skyblue;",value:"2"},
   {number:"flex-grow:1;background-color:#2c3e50;",value:"1"},
   {number:"flex-grow:3;background-color:#a37dc8;",value:"3"}, 
   {number:"flex-grow:1;background-color:#84dc2c;",value:"1"},
 ]



   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 

  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.click(this.key)

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){

   this.$store.state.HeaderTitle = "ProjectProperties"


 },
  getIndex(index) {
    console.log(index.target.selectedIndex)
      //  this.ValueClass = "order:" +index.target.value +";";
      this.values[index.target.selectedIndex].value = this.value[index.target.selectedIndex].value
      //  console.log( this.valueClass)
    }
 

  }

}

</script>

<style lang="scss"  scope>
  .ChidProperties {
    flex: 1;
    background-color: firebrick;
    display: flex;
    flex-direction: column;
  }
  .ChidProperties-Content-Box{
    flex:1;
    background-color: cyan;
    display: flex;
    flex-direction: column;

  }
  .ChidProperties-Title{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: cornflowerblue;
  }
  .ChidProperties-Content {
    flex: 1;
    background-color: cornflowerblue;
    display: flex;
    flex-direction: row
  }
  .ChidProperties-Content-Chid {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: blueviolet;
    color: white;
    margin: 0 10px;

  }
  .flex-grow-Box {
    flex: 1;
    background-color: chartreuse;
    display: flex;
    flex-direction: column;
  }
  .flex-grow-Title {
    height: 30px;
    line-height: 30px;
    background-color: goldenrod;
    font-size: 12px;
    color: white;
   overflow: hidden;
  }
  .flex-grow-Content {
    flex: 1;
    background-color: coral;
    display: flex;
    flex-flow: nowrap;
    color: white;
    align-items: center;
  }

  .flex-basis-Box {
    flex: 1;
    background-color: chartreuse;
    display: flex;
    flex-direction: row;
    align-items: center;
      }
      .flex-basis-Chid {
       border: 1px solid black;
       flex: 1;
      }
</style>